<template>
  <div class="card" :style="{ width }">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    span: {
      typeof: String,
      default: '',
    },
  },
  computed: {
    width() {
      if (this.span === '') return ''
      return `calc(${this.span} - 10px)`
    },
  },
}
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  background: #fff;
  margin-right: 10px;
  margin-bottom: 10px;
  & > div {
    width: 100%;
  }
}
</style>
